<template>
  <div class="input-cell">
    <!--错误信息 -->
    <span class="error-tip">请输入</span>
    <div class="input-value">
      <input
        ref="input"
        :class="['input-field', { pdr: clear }]"
        :value="value"
        :placeholder="label"
        :autofocus="autofocus"
        @focus="focus"
        @blur="onFieldBlur"
      />
    </div>
    <!--图标 -->
    <span class="clear">
      <SvgIcon v-if="value && clear && !password" @click.native="handleClear" type="close" />
    </span>
    <!--底部线条 -->
    <span :class="['focus-border', { active: isFocus, error: isError && !isFocus }]"></span>
  </div>
</template>
<script>
import { typeOf, oneOf } from "@libs/tools";
import { findComponentUpward, findBrothersComponents } from "@libs/assist";
import { Loading as VanLoading } from "vant";
export default {
  components: {
    VanLoading
  },
  name: "Input",
  props: {
    label: String,
    required: {
      type: Boolean,
      default: false
    },
    clear: {
      type: Boolean,
      default: false
    },
    value: {
      type: [String, Number],
      default: ""
    },
    autofocus: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      isFocus: false,
      validateState: ""
    };
  },
  computed: {
    isError() {
      return this.validateState === "error";
    }
  },
  methods: {
    validate(trigger = "blur", callback = function() {}) {
      return new Promise((resolve, reject) => {
        resolve(true);
      });
    },
    handleClear() {},
    focus() {
      this.isFocus = true;
    },
    onFieldBlur() {
      this.isFocus = false;
      this.validate("blur");
    }
  }
};
</script>
<style lang="stylus" scoped>
input::-webkit-outer-spin-button, input::-webkit-inner-spin-button {
  -webkit-appearance: none
}
input[type='number'] {
  -moz-appearance: textfield
}
/* * IE10及以上正常模式可以用css去除X按钮:
::-ms-clear,::-ms-reveal{display: none;} // -ms-clear是文本输入框的清除按钮，-ms-reveal是密码输入框的清除按钮
IE9以下是没有X按钮的，因此不用去除；
IE10及以上的兼容模式存在X按钮无法去除: */
::-ms-clear, ::-ms-reveal {
  display: none
}
.input-cell {
  position: relative
  box-sizing: border-box
  height: 42px
  width: 100%
  overflow: hidden
  color: #323233
  background-color: #fff
  .error-tip {
    position: absolute
    font-size: 14px
    color: #FF507F
    right: 0
    bottom: 0
    line-height: 32px
    z-index: 2
    background: #fff
    padding-right: 5px
  }
  .clear {
    position: absolute
    line-height: 32px
    right: 0
    bottom: 0px
    cursor: pointer
  }
  .input-value {
    position: absolute
    bottom: 0
    left: 0
    right: 0
    color: #969799
    word-wrap: break-word
  }
  .input-field {
    position: relative
    box-sizing: border-box
    display: block
    width: 100%
    // min-width: 0
    padding: 0px
    font-size: 16px
    color: #323233
    height: 32px
    line-height: 32px
    background-color: transparent // 去掉input边框
    border: 0
    resize: none
    outline: none
  }
  .input-field__control.pdr {
    padding-right: 16px
  }
}
/* * 如果其他标签需要类似的禁用效果，可以试试 pointer-events: none,并且hover 也没有效果 */
.input-cell::after {
  position: absolute
  box-sizing: border-box
  pointer-events: none // 摸不着，但是看得见。如果把某个元素再加上opacity：0；则可以很容易实现类似display:none；的效果（摸不着，看不见）。
  content: ''
  bottom: 0
  left: 0
  right: 0
  border-bottom: 1px solid #C3C3C3
  z-index: 2
}
.focus-border {
  position: absolute
  bottom: 0
  left: 0
  right: 0
  height: 2px // 通过高度覆盖
  transition: 0.5s
  background-color: #476BFF
  z-index: 3 // 覆盖在最上层,
}
.focus-border.active {
  width: 100%
}
.focus-border.error {
  width: 100%
  background-color: #FF507F
}
</style>